<template>
  <div id="app">
    <button class="save">
      保存 (先点击空白处保存学生名单，在点该按钮保存座位安排)
    </button>
    <button class="saveStudname">保存学生名单</button>
    <button class="clear">清除数据库，个人调试，慎用</button>
    <selector :sorList="list">
      <template>
        <aside>
          <button
            v-for="(item, index) in list"
            :key="index"
            type="button"
            @click="curId = index"
            :class="{ cur: curId === index }"
            :title="index"
          >
            <slot name="asidebtn1">{{ item.className }}</slot>
          </button>
        </aside>

        <div class="content">
          <div
            v-for="(item, index) in list"
            v-show="curId === index"
            :key="index"
            class="isShow"
          >
            <slot :name="'title' + index"
              ><h3>{{ item.aliasName }}</h3></slot
            >
            <slot :name="'content1' + index"
              ><seat :seId="index" :securId="curId" :seList="list"></seat
            ></slot>
          </div>
        </div>
      </template>
    </selector>
  </div>
</template>

<script>
import selector from "./components/selector";
import student from "./components/student";
import seat from "./components/seat";

export default {
  name: "App",
  components: {
    selector,
    student,
    seat,
  },
  mounted() {},
  data() {
    return {
      curId: 0,
      appList: [],
      test: new Array(2),
      list: [],
    };
  },
  created() {
    new Promise((resolve, reject) => {
      this.axios({
        url: "https://s.hzbiz.net/api/class.php",
      }).then((res) => {
        this.list = res.data;
        resolve();
      });
    }).then(() => {//进行异步渲染
      if (localStorage.seatArr) {
        let seatArr = JSON.parse(localStorage.seatArr);
        let appLi = document.querySelectorAll(".seatLi");
        for (let index = 0; index < appLi.length; index++) {
          const element = appLi[index];
          let pNode = document.createElement("p");
          pNode.innerText = seatArr[index].name;
          pNode.id = seatArr[index].id;
          pNode.setAttribute("name", seatArr[index].group);
          pNode.setAttribute("draggable", true);
          pNode.setAttribute("class", "move");
          pNode.style.background = seatArr[index].bk;
          element.appendChild(pNode);
        }
      }
    });
  },
};
</script>

<style>
li {
  overflow: hidden;
}
#app {
  width: 1200px;
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
  margin: 0 auto;
  position: relative;
}
* {
  margin: 0;
  padding: 0;
}
aside {
  position: absolute;
  left: 0;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  width: 100px;
  margin-top: 60px;
}
aside button {
  width: 100px;
  height: 50px;
}

.cur {
  background: #0099ff;
  color: #ffffff;
}
.content {
  width: 1000px;
  margin: 0 auto;
}
.saveStudname {
  position: absolute;
  right: 0px;
  top: 300px;
  width: 100px;
  height: 100px;
  color: red;
}
.clear {
  position: absolute;
  right: -200px;
  top: 300px;
  width: 100px;
  height: 100px;
  color: red;
}
.save {
  position: absolute;
  right: -100px;
  top: 300px;
  width: 100px;
  height: 100px;
  color: red;
}
</style>
